<template>
  <view class="flex-row justify-between">
    <image
      v-for="(item,index) in 5"
      :key="item"
      :src="`/static/star-${index > value ? 'gray' : 'check'}.png`"
      class="star"
      @click="chooseScore(index)"
    />
  </view>
</template>

<script setup lang="ts">
interface IProps{
  modelValue: number,
  disabled: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  modelValue: 0,
  disabled: false
})

const $emits = defineEmits(['update:modelValue'])

watch(() => props.modelValue, initData)

const value = ref(-1)

function initData(val:number) {
  value.value = val - 1
}
initData(props.modelValue)

function chooseScore(index:number) {
  if (props.disabled) return
  value.value = index
  $emits('update:modelValue', value.value + 1)
}

</script>

<style scoped lang="scss">
.star{
  width: 46rpx;
  height: 44rpx;
}
</style>
